<template>
  <div id="map"></div>
</template>

<script>
import popup from "./pop.vue";
import popup1 from "./pop1.vue";
import Vue from "vue";
export default {
  comments: {
    popup,
    popup1,
  },
  mounted() {
    mapboxgl.accessToken =
      "pk.eyJ1Ijoibmlja3p4dyIsImEiOiJja3hlYXI3NDQxYjhmMnVtZnRveTlxZGwwIn0.0Ude29mpR0-A0Z2Xf3PD2A";
    var map = new mapboxgl.Map({
      container: "map", // 地图容器的ID
      style: "mapbox://styles/mapbox/streets-v11", // 地图样式
      center: [0, 0], // 地图中心点坐标
      zoom: 14, // 地图缩放级别
    });

    // 地图加载完成后添加弹框
    map.on("load", function () {
      // 弹框的位置坐标及内容
      map.addLayer({
        id: "points-of-interest",
        type: "circle",
        metadata: {
          "mapbox:group": "points-of-interest",
        },
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                properties: {
                  // 弹框的标题
                  title: "弹框一",
                  // 弹框的描述
                  description: "我是弹框一",
                },
                geometry: {
                  type: "Point",
                  coordinates: [0, 0],
                },
              },
              {
                type: "Feature",
                properties: {
                  // 弹框的标题
                  title: "弹框一",
                  // 弹框的描述
                  description: "我是弹框二",
                },
                geometry: {
                  type: "Point",
                  coordinates: [0.004, 0.005],
                },
              },
            ],
          },
        },
        paint: {
          "circle-color": "#3887d4",
          "circle-radius": 60,
        },
      });

      // 添加弹框
      //   map.on("click", function (e) {
      //     console.log(55, e);

      //     // 获取要显示的弹框内容
      //     const featuresItem = map.queryRenderedFeatures(e.point, {
      //       layers: ["points-of-interest"], // 可选，只查询指定的层
      //     });
      //     console.log(59, featuresItem);

      //     const title = featuresItem[0].properties.title;

      //     const description = featuresItem[0].properties.description;
      //     console.log(58, description);
      //     // 创建自定义弹框HTML
      //     const popupHTML = `
      //      <div class="custom-popup">
      //     <h1>${title}</h1>
      //     <p>${description}</p>
      //   </div>
      //   `;

      //     // 在地图上的点位置显示弹框
      //     new mapboxgl.Popup()
      //       .setLngLat([e.lngLat.lng, e.lngLat.lat])
      //       .setHTML(popupHTML)
      //       .addTo(map);
      //   });

      map.on("click", function (e) {
        let PopupDom = new mapboxgl.Popup({
          closeButton: false,
          closeOnClick: true,
          offset: {
            bottom: [0, -40],
          },
        });
        const featuresItem = map.queryRenderedFeatures(e.point, {
          layers: ["points-of-interest"], // 可选，只查询指定的层
        });
        if (featuresItem.length != 0) {
          //   console.log(91, featuresItem);
          let content = featuresItem[0];
          //   console.log(92, content);
          const p = Vue.extend(popup1);
          let vm = new p({
            propsData: {
              objes: content,
            }, //传参
          });
          vm.$mount(); //挂载

          PopupDom.setLngLat([e.lngLat.lng, e.lngLat.lat])
            .setMaxWidth("400px") //设置弹窗最大宽度
            .setDOMContent(vm.$el) //插入节点
            .addTo(map);
          window.PopupDom = PopupDom;
        } else {
          console.log("else");
        }
      });
    });
  },
};
</script>

<style lang='less'scoped>
#map {
  width: 100%;
  height: calc(100vh - 40px);
  border: 1px solid red;
  box-sizing: border-box;
  ::v-deep .mapboxgl-popup-content {
    background: none;
    box-shadow: none;
    /* padding: 10px 10px 15px; */
  }
  ::v-deep .mapboxgl-popup-tip {
    display: none;
  }
}
</style>